<template>
	<view class="cashrecord">
		<!-- #ifdef MP-WEIXIN -->
		<view class="head" :style="{height: pHeight + tHeight + 'px'}">
			<view class="xztitle" :style="[{height: pHeight + 'px', top: tHeight + 'px',lineHeight: pHeight + 'px'}]">
				退款记录
				<view class="iconfont icon-dayuhao1" @click="fanhui"></view>
			</view>
		</view>
		<view class="headtop clearfix" :style="{marginTop: pHeight + tHeight + 'px'}">
			<view class="left fl clearfix" @click="show = true">
				<view class="iconfont icon-jishi fl"></view>
				<view class="text fl">{{datevalue}}</view>
				<u-calendar v-model="show" :mode="mode" toolTip="日期选择" @change="change"></u-calendar>
			</view>
			<view class="right fr clearfix" @click="showstatus = true">
				<view class="text fl">{{statusvalue}}</view>
				<view class="iconfont fr icon-xiala1"></view>
				<u-select v-model="showstatus" :list="list" @confirm="confirm"></u-select>
			</view>
		</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-ALIPAY -->
		<view class="headtop clearfix">
			<view class="left fl clearfix" @click="show = true">
				<view class="iconfont icon-jishi fl"></view>
				<view class="text fl">{{datevalue}}</view>
				<u-calendar v-model="show" :mode="mode" toolTip="日期选择" @change="change"></u-calendar>
			</view>
			<view class="right fr clearfix" @click="showstatus = true">
				<view class="text fl">{{statusvalue}}</view>
				<view class="iconfont fr icon-xiala1"></view>
				<u-select v-model="showstatus" :list="list" @confirm="confirm"></u-select>
			</view>
		</view>
		<!-- #endif -->
		
		<view class="body" v-if="listData.length != 0">
			<view class="list" v-for="(item,index) in listData" :key="index">
				<view class="top clearfix">
					<view class="left fl">订单编号：{{item.danhao}}</view>
					<view class="right fr" v-if="item.status == 0">审核中</view>
					<view class="right fr" v-if="item.status == 1">提现成功</view>
					<view class="right fr" v-if="item.status == 2">撤回</view>
					<view class="right fr" v-if="item.status == 3">退回</view>
					<view class="right fr" v-if="item.status == 4">失败</view>
					<view class="right fr" v-if="item.status == 5">审核中</view>
				</view>
				<view class="bottom clearfix">
					<text>时间：{{item.create_time}}</text><text>￥{{item.money}}</text>
				</view>
			</view>
		</view>
		<view class="empty" v-else>
			<text>没有更多了</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				headerTop: 0,
				pHeight: 0,
				tHeight: 0,
				show: false,
				mode: 'range',
				showstatus: false,
				list: [{
					value: '6',
					label: '全部'
				}, {
					value: '5',
					label: '审核中'
				}, {
					value: '1',
					label: '提现成功'
				}, {
					value: '2',
					label: '撤回'
				}, {
					value: '3',
					label: '退回'
				}, {
					value: '4',
					label: '失败'
				}],
				datevalue: '开始时间-结束时间',
				statusvalue: '请选择状态',
				sdate: '',
				edate: '',
				value: '',
				listData: [],
				page: 1,
				pageSize: 10,
				total: 0,
			}
		},
		onShow() {
			// 头部距离
			let res = uni.getSystemInfoSync() ///微信api方法
			let titleH;
			if (res && res['system']) {
				// 判断是否是安卓操作系统 （标题栏苹果为44px,安卓为48px）
				if (res['system'].indexOf('Android') > 0) {
					titleH = 48
				} else {
					titleH = 46
				}
				this.headerTop = titleH + res['statusBarHeight']
				this.pHeight = titleH
				this.tHeight = res['statusBarHeight']
				
				// #ifdef MP-ALIPAY
				my.setNavigationBar({
					frontColor: '#ffffff',
					backgroundColor: '#00D6C0',
				})
				// 设置导航栏标题
				my.setNavigationBar({
					title: '退款记录'
				})
				// #endif
			}
			
			//初始化时间,展示近一个月数据
			let times = this.getDate('lastOneMonth');
			this.sdate = times.startTime;
			this.edate = times.endTime;
			this.datevalue = this.sdate + '-' + this.edate;

			this.total = 0;
			this.page = 1;
			this.listData = [];
			this.getList(this.value, this.sdate, this.edate, this.page, this.pageSize);
		},
		onReachBottom() {
			if (this.total != this.listData.length) {
				this.page = this.page + 1;

				this.getList(this.value, this.sdate, this.edate, this.page, this.pageSize);
			}
		},
		methods: {
			getList(value, sdate, edate, page, pageSize) {
				this.request({
					url: '/xcxmoney/cashrecord',
					data: {
						user_id: uni.getStorageSync('user_id'),
						value: value,
						sdate: sdate,
						edate: edate,
						page: page,
						pageSize: pageSize,
						role_id: '',
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						this.total = res.data.data.total;
						this.listData = this.listData.concat(res.data.data.data);
					} else {
						uni.showToast({
							title: '请求失败，请稍后再试',
							icon: 'none'
						})
					}
				})
			},
			change(e) {
				this.datevalue = e.startDate + '-' + e.endDate;
				this.sdate = e.startDate;
				this.edate = e.endDate;

				this.total = 0;
				this.page = 1;
				this.listData = [];

				this.getList(this.value, this.sdate, this.edate, this.page, this.pageSize);
			},
			confirm(e) {
				this.statusvalue = e[0].label;
				this.value = e[0].value;

				this.total = 0;
				this.page = 1;
				this.listData = [];

				this.getList(this.value, this.sdate, this.edate, this.page, this.pageSize);
			},
			//返回
			fanhui() {
				uni.navigateBack()
			},
			topage(url) {
				uni.navigateTo({
					url
				})
			},
			//格式化时间
			formatTime(param) {
				let y = param.getFullYear();
				let m = param.getMonth() + 1;
				let d = param.getDate();
				m = m < 10 ? ("0" + m) : m;
				d = d < 10 ? ("0" + d) : d;
				return y + "-" + m + "-" + d;
			},
			getDate(code) {
				const date = new Date();
				let endTime = this.formatTime(date);
				let date1 = Date.parse(date);
				let start = '';
				let end = '';
				let oneDay = 1000 * 3600 * 24;

				switch (code) {
					//今天
					case 'today':
						start = new Date();
						break;
						//最近2天
					case 'lastTwoDay':
						start = date1 - oneDay * 2;
						break;
						//最近1周
					case 'lastOneWeek':
						start = date1 - oneDay * 7;
						break;
						//最近2周
					case 'lastTwoWeek':
						start = date1 - oneDay * 14;
						break;
						//最近1月
					case 'lastOneMonth':
						start = new Date();
						start.setMonth(start.getMonth() - 1)
						break;
						//最近2月
					case 'lastTwoMonth':
						start = new Date();
						start.setMonth(start.getMonth() - 2)
						break;
						//最近3月
					case 'lastThreeMonth':
						start = new Date();
						start.setMonth(start.getMonth() - 3)
						break;
						//最近半年
					case 'lastHalfYear':
						start = date1 - oneDay * 183;
						break;
						//最近一年
					case 'lastOneYear':
						start = new Date();
						start.setYear(start.getFullYear() - 1)
						break;
						//本周
					case 'thisWeek':
						let a = 6 - date.getDay();
						start = new Date(date1 - oneDay * a).setHours(0, 0, 0, 0);
						end = new Date(date1 + oneDay * (1 + date.getDay())).setHours(24, 0, 0, 0)
						break;
						//本月
					case 'thisMonth':
						start = new Date();
						start.setHours(0, 0, 0, 0)
						start.setMonth(start.getMonth(), 1)
						end = new Date(start)
						end.setHours(0, 0, 0, 0)
						end.setMonth(start.getMonth() + 1, 1)
						break;
						//本年
					case 'thisYear':
						start = new Date();
						start.setHours(0, 0, 0, 0)
						start.setMonth(0, 1)
						start.setYear(start.getFullYear())
						end = new Date(start)
						end.setHours(0, 0, 0, 0)
						end.setMonth(start.getMonth(), 1)
						end.setYear(start.getFullYear() + 1)
						break;
				}

				return {
					startTime: this.formatTime(new Date(start)),
					endTime: end ? this.formatTime(new Date(end)) : endTime,
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.cashrecord {
		width: 100%;
		margin: 0 auto;

		.head {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			background: #00D6C0;

			.xztitle {
				position: fixed;
				left: 0%;
				top: 0;
				width: 100%;
				text-align: center;
				color: #ffffff;
				font-size: 32rpx;

				.iconfont {
					position: absolute;
					top: 0;
					left: 10rpx;
					font-size: 44rpx;
				}
			}
		}

		.headtop {
			background-image: linear-gradient( #00D6C0, #f5f5f5);
			width: 100%;
			padding: 5% 3%;
			box-sizing: border-box;
			height: 300rpx;

			.left {
				width: 57%;
				background: #f5f5f5;
				height: 70rpx;
				line-height: 70rpx;
				padding: 0 2%;
				box-sizing: border-box;
				border-radius: 10rpx;

				.iconfont {
					font-size: 28rpx;
					margin-right: 4rpx;
					color: #464646;
				}

				.text {
					font-size: 24rpx;
					color: #464646;
				}
			}

			.right {
				width: 40%;
				background: #f5f5f5;
				height: 70rpx;
				line-height: 70rpx;
				padding: 0 2%;
				box-sizing: border-box;
				border-radius: 10rpx;
				text-align: right;

				.iconfont {
					font-size: 28rpx;
					color: #464646;
				}

				.text {
					font-size: 24rpx;
					color: #464646;
				}
			}
		}

		.body {
			width: 94%;
			margin: 20rpx auto;
			margin-top: -160rpx;

			.list {
				width: 100%;
				margin: 0 auto 20rpx;
				background: #ffffff;
				box-sizing: border-box;
				border-radius: 20rpx;

				.top {
					width: 100%;
					padding: 3%;
					padding-bottom: 20rpx;
					margin-top: 10rpx;
					border-bottom: 1rpx solid #f5f5f5;

					.left {
						font-size: 30rpx;
						color: #7e7e7e;
						width: 80%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.right {
						font-size: 30rpx;
						color: #7e7e7e;
					}
				}

				.bottom {
					width: 100%;
					padding: 0 3% 3%;
					margin-top: 20rpx;

					text:nth-of-type(1) {
						float: left;
						color: #878787;
					}

					text:nth-of-type(2) {
						float: right;
						color: #292929;
						font-size: 32rpx;
					}
				}
			}
		}

		.empty {
			width: 100%;
			text-align: center;
			font-size: 30rpx;
			color: #8f9998;
		}
	}
</style>